/**
 * 网络拓扑图
 * 
 * default --> options = {
        rootImages: 'assets/images/VPCBox/',
        boxStyle: [
            'routeTable.png',
            'cvm.png',
            'lb.png'
        ],
        boxes: [[1,2]]
    }
 *
 */


var Raphael = require('raphael');

angular
    .module('baocloud.components.subnetRaphael',[])
    .controller('SubnetRaphaelController', SubnetRaphaelController)
    .directive('subnetRaphael', subnetRaphael)

function subnetRaphael() {
    var directive = {
        restrict: 'AE',
        replace: true,
        transclude: true,
        scope: {
            model: '='
        },
        templateUrl: function (element, attrs) {
            return attrs.templateUrl || 'subnetRaphael/subnetRaphael.html';
        },
        link:link,
        controller: 'SubnetRaphaelController',
        controllerAs: 'SubnetRaphaelCtrl'

    };
    return directive;
}

function link(scope, element, attr, ctrl){
    setTimeout(function(){
        linkSetTimeout(scope, element, attr, ctrl)
    },0);
}

function linkSetTimeout(scope, element, attr, ctrl) {
    var options = {
        rootImages: 'assets/images/VPCBox/',
        boxStyle: [
            'routeTable.png',
            'cvm.png',
            'lb.png'
        ],
        boxes: [[1,2]]
    };
    var model = scope.model || options;
    var boxes = model.boxes;
    var rootImages = model.rootImages;
    var boxStyle = model.boxStyle;
    var rowCount = boxes.length;

/////////////////////////////////////////////////// 
    var startX = 185.5;   //X 起点
    var startY = 170;     //y 起点
    var moveX = 160;      //X 间距
    var moveY = 120;      //y 间距

    var moveInY = rowCount === 1 ? 100 : 200;   //入口线间距

    var point = 'M' + startX + ',50V' + (moveY * (rowCount - 1) + startY);   //竖线

    var canvas = Raphael(element[0], element.width(), (moveY * (rowCount - 1) + startY));
    canvas.setStart();
    //线样式定义
    var lineStyle = {
        'stroke': '#ffc633',
        'stroke-width': '2'
    }

    var rectStyle = {
        'fill': '#fafbff',
        'stroke': '#c7cfdc',
        'stroke-width': '2'
    }

    var textStyle = {
        'font-size': '14px',
        'font-weight': 'normal',
        'fill': '#a2a2a2'
    }

    canvas.path(point).attr(lineStyle);   //竖线  height:  v++ 延伸 step 画出子网

    boxes.forEach(function(items,rIdx){
        var pathY = moveY * rIdx + 73;
        var pathV = moveY * rIdx + 50;

        items.forEach(function(text,nIdx){
            var index = nIdx + 1;
            var spacePath = 'M'+ (startX + moveX * index + 40) + ',' + pathY + 'V' + pathV +'H' + startX;  //挂载横线
            //横向间隔线
            canvas.path(spacePath).attr(lineStyle);
            //方块
            canvas.rect(startX + moveX * index, moveY * rIdx + 80, 80, 30, 5).attr(rectStyle);
            //子网下挂载图标
            canvas.image(rootImages + boxStyle[index], startX + moveX * index + 14, moveY * rIdx + 80 + 7, 15, 15);
            //间隔符
            canvas.text(startX + moveX * index + 43, moveY * rIdx + 94, 'x').attr(textStyle);
            //子网下的挂载数量
            canvas.text(startX + moveX * index + 60, moveY * rIdx + 94, text).attr(textStyle);
        });

        canvas.image(rootImages + boxStyle[0], startX + moveX/5, moveY * rIdx + 35 , 30, 30); 
    });

    // for(var i = 1; i <= rowCount; i++){
    //     var pathY = moveY * (i-1) + 73;
    //     var pathV = moveY * (i-1) + 50;
    //     for(var j = 1; j <= boxes[i-1].length; j++) {
    //         var spacePath = 'M'+ (startX + moveX * j + 40) + ',' + pathY + 'V' + pathV +'H' + startX;  //挂载横线
    //         canvas.path(spacePath).attr(lineStyle);
    //         canvas.rect(startX + moveX * j, moveY * (i-1) + 80, 80, 30, 5).attr(rectStyle);               //方块

    //         //子网下挂载图标
    //         canvas.image(rootImages + boxStyle[j], startX + moveX * j + 14, moveY * (i-1) + 80 + 7, 15, 15);
    //         //间隔符
    //         canvas.text(startX + moveX * j + 43, moveY * (i-1) + 94, 'x').attr(textStyle);   
    //         //子网下的挂载数量
    //         canvas.text(startX + moveX * j + 60, moveY * (i-1) + 94, boxes[i-1][j-1]).attr(textStyle);
    //     }
    //     //子网路由线路图标
    //     canvas.image(rootImages + boxStyle[0], startX + moveX/5, moveY * (i -1) + 35 , 30, 30);     
        
    // }

    //左侧图画
    //var inLine = 'M' + (startX -32) + ',' + moveInY + 'H' + startX + 'V' + moveInY;   //竖线
    //canvas.path(inLine).attr(lineStyle);
    //canvas.image(rootImages+'router.png', 113, moveInY - 40/2, 40, 40);

    canvas.setFinish();
    
}

function SubnetRaphaelController($scope){
    console.log('---->'+JSON.stringify($scope.model));
}
